<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/fontface.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
  <!-- <title>案例文件下载</title> -->
</head>

<body>
  <div class="content" id="app">
    <div class="header">
      <!-- <span> 《 </span> -->
      <span>案例文件下载</span>
    </div>
    <!-- <span class="iconfont ontClass/symbot/shandianzan_huaban">&#xe613;</span> -->
    <!-- <span class="iconfont">&#xe613;</span> -->
    <!-- <span class="iconfont">&#x33;</span> -->
    <!-- <div id="noApplicationRecord"></div> -->
    <div class="content_div" v-for="item in list" :key="item.fileUrl">
      <div class="content_img">
        <img src="../imgs/xx.png" alt="">
      </div>
      <div class="content_c">
        <div>
          <div class="content_fileName">{{item.fileName === null?"暂无名称":item.fileName}}</div>
        </div>
        <div>

          <span><a
              :href="base_url+'/cpcp/api/downloadSftp?filePath='+item.filePath+'&fileName='+item.fileName">下载</a></span>
          <!-- <span class="iconfont" :class="zanCount == 0 ? '' : 'iconfontStyle'" @click="thumbsUp(item)">&#xe613;</span> -->
          <span class="iconfont" :class="item.isSpot != 1 ? 'iconfontStyle' : 'iconfontStyle_red'"
            @click="thumbsUp(item)">&#xe613;</span>
          <!-- <span class="iconfont " v-else  @click="thumbsUp(item)">&#xe613;</span> -->
          <!-- <span>{{isZanNum}}</span> -->
        </div>

      </div>
    </div>
    <!-- 评论 -->
    <div class="comment">

      <div class="title">评论</div>
      <div class="comm-div2">
        <div class="comm-div" v-for="item in commentList">
          <div class="user-div">
            <img class="user-img" src="../imgs/user.png" alt="">
          </div>

          <div class="username">
            {{item.userName}}
            <div class="adddate">{{item.createDate.substr(0,19).replace("T"," ")}}</div>
          </div>

          <div class="comment-s">
            {{item.commentMsg}}
          </div>
        </div>

      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom_btn">
      <!-- <div><input type="text" v-model="commentMsg" placeholder="说点什么......"></div> -->
      <textarea name="txt" clos=",20" rows="5" v-model="commentMsg" warp="virtual" placeholder="说点什么......"></textarea>
      <div><button @click="subComment">发&nbsp;&nbsp;送</button></div>
    </div>
  </div>
</body>
<script>
  // var noApplicationRecord = document.getElementById('noApplicationRecord')
  // //绘制单个div
  // function setDiv(item) {
  //     var div = '<div class="content_div"><div class="content_img" >'
  //         + '<img src="../imgs/xx.png" alt="" id="div_img">'
  //         + '</div><div class="content_c">'
  //         + '</div>'
  //         + item.fileName + "<br/>"
  //         // + item.fileUrl
  //         + '<a href=' + item.fileUrl + '>下载</a>'
  //         // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
  //         + '<button onclick=' + downLoad(item) + '>下载</button>'
  //         + '</div>'
  //     return div
  // }
  // //循环加载到页面
  // function getnoApplicationData() {
  //     var html = ''
  //     for (var i = 0; i < data.length; i++) {
  //         html += setDiv(data[i])
  //     }
  //     noApplicationRecord.innerHTML = html
  // }

  // // window.onload = getnoApplicationData()
  let vm = new Vue({
    el: '#app',
    data: function () {
      return {
        isZan: 0,
        isZanNum: null,
        base_url: 'http://192.168.110.54:8501',
        // base_url: 'http://134.64.251.212:8084',
        list: [],
        data: [{
          "fileName": null,
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        },
        {
          "fileName": "a2.txt",
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        },
        {
          "fileName": "a3.txt",
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        }

        ],
        userName: '',
        fileBatchId: '',
        duId: null,
        commentList: [],
        spotUserFileList: [],
        commentMsg: ''
      }
    },
    created() {

      let thisUrl = window.location.href;
      this.fileBatchId = parseInt(this.getQueryString('fileBatchId'))
      this.userName = this.getQueryString('userName')
      // this.duId = this.getQueryString('duId')

      // console.info(this.userName, this.fileBatchId)
      // console.info(this.fileBatchId)
      // console.info(typeof this.fileBatchId)

      this.getData()
      // this.getduId()
      // console.log("duIdduIdduId",this.duId);
      // this.getCommonList(this.duId)
      // this.getspotUserFileList()

    },

    methods: {
      //点赞
      thumbsUp(item) {
        console.log("itemitemitemitem", item.isSpot)
        // console.log("itemitemitemitem", item.id)
        // console.log("itemitemitemitem", typeof item.id)
        // console.log("===============");
        // console.log(this.list['isSpot']);
        // console.info(this.fileBatchId)
        // console.info("9999999999999999999999999",typeof this.fileBatchId)
        // console.log("this.duIdthis.duIdthis.duIdthis.duId",this.duId);
        // console.log("this.duIdthis.duIdthis.duIdthis.duId",typeof this.duId);
        // let isSpot = item.zanCount

        let isSpot = null
        // isSpot = 0
        // isSpot = isSpot === 0 ? 1 : 0
        if (item.isSpot == 1) {
          isSpot = 0
          // console.log("1111111",);
        } else {
          isSpot = 1
        }
        console.log("---------------", isSpot);
        // return
        let url = this.base_url + "/cpcp/appreciate/insertCaseSpot?caseId=" + this.fileBatchId + "&userName=" + this
          .userName + "&fileId=" + item.id + "&isSpot=" + isSpot + "&duId=" + parseInt(this.duId)
        // this.spotUserFileList.forEach((ittt => {
        //   // console.log(ittt.isSpot);
        //   this.isZanNum = ittt.isSpot
        //   // console.log("this.isZanNumthis.isZanNum",this.isZanNum);
        //   // console.log("this.isZanNumthis.isZanNum111111",ittt.fileId);
        //   // console.log("this.isZanNumthis.isZanNum111111",typeof ittt.fileId);
        //   if (item.id == ittt.fileId) {
        //     console.log("哈哈哈");
        //     // this.isZan = 1
        //     if (this.isZanNum === 0) {
        //       console.log("22222222222222222222222222222222");
        //       // console.log("this.isZanNumthis.isZanNumthis.isZanNum--------------",this.isZanNum);
        //       // console.log("this.isZanNumthis.isZanNumthis.isZanNum--------------",typeof this.isZanNum);
        //       this.isZan = 0
        //     } else {
        //       console.log("11111111111111111111111111111111");
        //       this.isZan = 1
        //     }
        //   }
        // }))
        // console.log("///////////////////",this.isZanNum);
        // console.log("///////////////////",typeof this.isZanNum);
        axios.get(url).then(e => {
          // console.log("eeeeeeeeeeeeeeeeeeeeeeeee",e);
          // this.getspotUserFileList()
          this.getData()
        }).catch(error => { });
        this.getCommonList(this.duId)

      },
      getspotUserFileList() {
        console.log("this.spotUserFileListthis.spotUserFileListthis.spotUserFileListthis.spotUserFileList", this.spotUserFileList);
        this.spotUserFileList.forEach((ittt => {
          console.log("ittt.isSpot:" + ittt.isSpot);
          // this.isZanNum = ittt.isSpot

          for (let x in this.list) {
            // let item = this.list[x]
            // this.list[x].isSpot = 0
            if (ittt.fileId == this.list[x].id && ittt.isSpot == 1) {
              console.info(this.list[x].fileName + "点赞")
              this.list[x].isSpot = 1

            }
          }
          console.log('list11', this.list);
        }))

        console.info("=====this.list====")
        console.info(this.list)

      },
      //获取duId
      getduId() {
        console.info("----------------------", this.fileBatchId)
        console.info(typeof this.fileBatchId)
        let url = this.base_url + "/cpcp/appreciate/getDuId?caseId=" + 20890
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(url).then(e => {
          // console.log("000000000000000000000",e);
          if (e.data.code === 0) {
            this.duId = e.data.data
            this.duId = 20890

            // console.log("this.duId11111111111====",this.duId);
            // console.log("this.duId11111111111====",typeof this.duId);
          }
          console.log("this.duId====", this.duId);
          this.getCommonList(this.duId)
        }).catch(error => { });

      },
      //评论
      subComment(fileId) {
        let url = this.base_url + "/cpcp/appreciate/insertCaseComment?caseId=" + this.fileBatchId + "&userName=" +
          this.userName + "&commentMsg=" + this.commentMsg + "&duId=" + this.duId
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(url).then(e => {
          console.log(e);
          this.commentMsg = ""
          this.getCommonList(this.duId)
        }).catch(error => { });


      },

      getCommonList(duId) {
        console.log("duIdduIdduIdduIdduIdduId====", duId);
        let thisUrl = this.base_url + "/cpcp/appreciate/caseSpotAndCommentList?caseId=" + this.fileBatchId +
          "&userName=" + this.userName + "&duId=" + duId
        axios.get(thisUrl).then(e => {
          console.log("111111111111111", e);
          this.commentList = e.data.data.commentList
          for (let x in this.commentList) {
            let item = this.commentList[x]
            // console.info(new Date(item.createDate))
          }

          this.spotUserFileList = e.data.data.spotUserFileList
          this.getspotUserFileList()


        }).catch(error => { });

      },
      getData() {

        let thisUrl = window.location.href;
        if (thisUrl.indexOf("=") == -1) {
          console.info("参数不正确!")
          return;
        }
        let value = thisUrl.substr(thisUrl.indexOf("=") + 1, thisUrl.length)
        let url = this.base_url + "/cpcp/cpcpjsoncontent/getFile/" + this.fileBatchId
        url = this.base_url + "/cpcp/cpcpjsoncontent/getFile/" + this.fileBatchId
        let params = new URLSearchParams();
        axios.get(url).then(e => {
          // console.log(e.data.data);
          this.setData(e.data.data)
          this.getduId()

        }).catch(error => { });
        // this.getnoApplicationData()
        // let _data = [{
        //   "msg": "操作成功",
        //   "code": 200,
        //   "data": {
        //     "fileName": "developer_template.xlsx",
        //     "filePath": "developer_template.xlsx",
        //     "id": 1,
        //     "fileType": 1
        //   }
        // }, {
        //   "msg": "操作成功",
        //   "code": 200,
        //   "data": {
        //     "fileName": "provinceData_template.xlsx",
        //     "filePath": "provinceData_template.xlsx",
        //     "id": 2,
        //     "fileType": 1
        //   }
        // }, {
        //   "msg": "操作成功",
        //   "code": 200,
        //   "data": {
        //     "fileName": "provinceAssess_template.xlsx",
        //     "filePath": "provinceAssess_template.xlsx",
        //     "id": 3,
        //     "fileType": 1
        //   }
        // }]
        // this.setData(_data)

        // this.getCommonList(this.duId)
      },
      setData(data) {
        let thisList = []
        data.forEach(element => {
          // console.info(element.data)
          thisList.push(element.data)

        });
        thisList.forEach(item => {
          // console.info(element.data)
          item.isSpot = 0;

        });
        // this.list = (JSON.parse(e.data.data))
        this.list = thisList
        console.log("_this.list", this.list);
        this.getnoApplicationData()
      },
      //绘制单个div
      setDiv(item) {
        var div = '<div class="content_div"><div class="content_img" >' +
          '<img src="../imgs/xx.png" alt="" id="div_img">' +
          '</div><div class="content_c">' +
          '</div>' +
          item.fileName + "<br/>"
          // + item.fileUrl
          +
          '<a href=' + item.fileUrl + '>下载</a>'
          // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
          // +'<button onclick=' + downLoad(item) + '>下载</button>'
          +
          '</div>'
        return div
      },
      //循环加载到页面
      getnoApplicationData() {
        // console.log("22222");
        // console.log("3333", this.data);

        var html = ''
        // for (const iterator of this.list) {
        //     console.log("iterator", iterator);
        //     html += this.setDiv(iterator)
        // }
        for (var i = 0; i++; i < this.data.length) {
          console.log("42353");
          html += setDiv(this.data[i])
        }
        // noApplicationRecord.innerHTML = html
      },
      downLoad(item) {
        console.log(item);
      },
      handleAddQuest(item) {
        console.log(item);
        // let _this = this
        // let _url = baseUrl + '/shop/getMembers?shopName=' + this.shopName
        let url = this.base_url + "/cpcp/api/downloadSftp" +
          `?filePath=${item.filePath}&fileName=${item.fileName}`
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(url).then(e => {
          console.log(e);
          // window.location.href= "http://192.168.1.105:8501/cpcp/api/downloadSftp" + `/filePath=${item.filePath}&fileName=${item.fileName}`
          // this.list = (JSON.parse(e.data.data.fileIds))
          // console.log("_this.list", this.list);
          // this.getnoApplicationData()
        }).catch(error => { });
        // this.getnoApplicationData()

      },

      getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
          return decodeURIComponent(r[2]);
        };
        return null;
      },
    },
  })
</script>

<style>
  .iconfontStyle {
    /* color: red; */
    font-size: 30px;
    vertical-align: middle;
    margin-left: 20px;
  }

  .iconfontStyle_red {
    color: red;
    font-size: 30px;
    vertical-align: middle;
    margin-left: 20px;
  }

  .bottom_btn textarea {
    width: 275px;
    height: 30px;
    background-color: white;
    border-radius: 18px;
    padding-left: 20px;
    border: 1px solid gainsboro;
  }

  input:focus,
  textarea:focus {
    outline: none;
  }

  .bottom_btn {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
  }

  #textArea::-webkit-input-placeholder {
    height: 30px;
    line-height: 30px
  }

  /* 使用webkit内核的浏览器 */
  #textArea:-moz-placeholder {
    height: 30px;
    line-height: 30px
  }

  /* Firefox版本4-18 */
  #textArea::-moz-placeholder {
    height: 30px;
    line-height: 30px
  }

  /* Firefox版本19+ */
  #textArea:-ms-input-placeholder {
    height: 30px;
    line-height: 30px
  }
</style>

</html>